<script lang="ts" setup>
  import { createOrderApi, orderPayApi, preOrderApi } from '@/apis/consult'
  import { getPatientDetailApi } from '@/apis/patient'
  import { useConsultStore } from '@/sotre/consult'
  import type { OrderPreData } from '@/types/consult'
  import type { PatientItem } from '@/types/patient'
  import { ref } from 'vue'

  // 准备需要的参数
  const store = useConsultStore()

  // 定义变量存储响应的数据
  const illnessInfo = ref({} as OrderPreData)
  // 1. 发起请求获取订单数据
  const createPreOrder = async () => {
    const res = await preOrderApi({
      type: store.type,
      illnessType: store.illnessType,
    })
    // console.log(res)
    illnessInfo.value = res
  }
  createPreOrder()

  // 2. 获取患者信息
  const patientInfoDetail = ref({} as PatientItem)
  const patientInfo = async () => {
    const res = await getPatientDetailApi(store.patientId)
    console.log(res)
    patientInfoDetail.value = res
  }
  patientInfo()

  // 3. 创建订单
  const orderId = ref('')
  const customPopup = ref()
  const createOrder = async () => {
    if (orderId.value !== '')
      return uni.showToast({
        title: '订单不能重复创建！',
      })
    const res = await createOrderApi({
      patientId: store.patientId,
      type: store.type,
      illnessType: store.illnessType,
      depId: store.depId,
      illnessDesc: store.illnessInfo.illnessDesc,
      illnessTime: store.illnessInfo.illnessTime,
      pictures: store.illnessInfo.pictures,
      consultFlag: store.illnessInfo.consultFlag,
    })
    // console.log(res)
    orderId.value = res.id
    // 情况仓库数据
    store.clear()

    // 弹出支付弹窗
    customPopup.value.open()
  }

  // 点击关闭弹窗
  const closeClick = async () => {
    // 1. 点击关闭执行的逻辑...
    // {confirm} 对象的结构， 获取 -之后对象的特性属性
    const { confirm } = await uni.showModal({
      title: '关闭支付',
      content: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
      cancelText: '仍要关闭',
      cancelColor: '#848484',
      confirmText: '继续支付',
      confirmColor: '#16C2A3',
    })
    // console.log(confirm)

    if (!confirm) {
      // 2. 关闭弹窗
      customPopup.value.close()
      uni.reLaunch({
        url: '/pages/index/index',
      })
    }
  }
  // 点击确认执行的逻辑
  const confirmClick = async (index: number) => {
    //  点击确认执行的逻辑...
    // 1. 选择微信支付提示
    if (index === 0) {
      return uni.showToast({
        title: '暂不支持微信支付',
        icon: 'error',
      })
    }

    // 2. 支付宝支付调取接口
    const res = await orderPayApi({
      orderId: orderId.value,
      paymentMethod: index + '',
      payCallback:
        'https://env-00jxu6xfoqpq-static.normal.cloudstatic.cn/index.html#/subpkg_consult/room/index',
    })
    console.log('支付结果', res)
    // 3. 跳转到支付地址， 完成支付
    // 再根据传递的callback回调，返回到对应的url
    window.location.href = res.payUrl
  }
</script>

<template>
  <scroll-page>
    <view class="payment-page">
      <uni-section
        title-font-size="32rpx"
        title-color="#121826"
        padding="30rpx"
        :title="`图文问诊${illnessInfo.payment || '加载中'} 元`"
      >
        <uni-list :border="false">
          <uni-list-item
            title="极速问诊"
            note="自动分配医生"
            thumb="/static/uploads/doctor-avatar.jpg"
            thumb-size="lg"
          />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${illnessInfo.couponDeduction || 0}.00`"
          />
          <uni-list-item title="积分抵扣">
            <template #footer>
              <view class="uni-list-text-red">-¥{{ illnessInfo.pointDeduction || 0 }}.00</view>
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red">¥{{ illnessInfo.actualPayment || 0 }}.00</view>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>

      <view class="dividing-line"></view>

      <uni-section title-font-size="32rpx" title-color="#121826" padding="30rpx" title="患者资料">
        <uni-list :border="false">
          <uni-list-item title="患者信息">
            <template #footer>
              <view class="uni-list-text-gray"
                >{{ patientInfoDetail.name }} | {{ patientInfoDetail.genderValue }} |
                {{ patientInfoDetail.age }}岁
              </view>
            </template>
          </uni-list-item>
          <uni-list-item border title="病情描述" :note="`${store.illnessInfo.illnessDesc}`" />
        </uni-list>
      </uni-section>

      <!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <view class="total-amount">
        合计: <text class="number">¥{{ illnessInfo.actualPayment }}.00</text>
      </view>
      <button class="uni-button" @click="createOrder">立即支付</button>
    </view>
  </scroll-page>
  <custom-payment
    ref="customPopup"
    :orderId="orderId"
    :amount="illnessInfo.actualPayment"
    @close="closeClick"
    @confirm="confirmClick"
  />
</template>

<style lang="scss">
  @import './index.scss';
</style>
